<script setup>
import { onMounted, ref } from 'vue'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'
import { getParkingGuideList } from '@/api/play'

const parkingGuideList = ref([]) // 停车指引
async function onGetParkingGuideList() {
  const { result } = await getParkingGuideList()
  parkingGuideList.value = result.map(item => ({ ...item, cover: fixCoverImageUrl(item.cover) }))
}

function onShowAddress(item) {
  uni.openLocation({
    name: item.title,
    address: item.remark,
    latitude: +item.latitude,
    longitude: +item.longitude,
  })
}

onMounted(() => {
  onGetParkingGuideList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="停车指引" custom-color="#000" left-show placeholder fixed />
    <view class="px-2 pb-3">
      <view class="py-3 text-32 font-semibold">
        推荐周边以下停车场
      </view>
      <view v-for="item in parkingGuideList" :key="item.id" class="px-2 py-3 mb-3 bg-white rounded flex" @click="onShowAddress(item)">
        <image class="rounded h-138 w-172 overflow-hidden" :src="item.cover" mode="aspectFill" />
        <view class="ml-4 text-28 flex flex-col gap-1 justify-center">
          <view class="text-[#3E7CDE]">
            {{ item.title }}
          </view>
          <view class="text-[#666]">
            {{ item.remark }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
